<template>
    <div class="bigbox">
        <div class="box">
            <div class="addHeader">
                <span class="header1">场馆添加</span>
                <el-button type="info" @click="back">＜返回</el-button>
            </div>
            <div class="content">
                
                    <el-form :model="form" label-width="120px" style="margin-left:60px">
                        <el-form-item label="场馆名称">
                            <el-input v-model="form.name" placeholder="xx健身馆" style="width: 30%"/>
                        </el-form-item>
                        <el-form-item label="电话" >
                            <el-input v-model="form.tel" placeholder="18000000000" style="width: 30%"/>
                        </el-form-item>
                        <el-form-item label="地址" >
                            <el-input v-model="form.address" placeholder="请输入地址" style="width: 30%"/>
                        </el-form-item>
                        <el-form-item label="邮箱" >
                            <el-input v-model="form.email" placeholder="2333333@163.com" style="width: 30%"/>
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-radio-group v-model="form.state">
                                <el-radio label="正常" />
                                <el-radio label="弃用" />
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="介绍">
                            <el-input v-model="form.desc" type="textarea" :rows="10" placeholder="介绍" style="width: 50%"/>
                        </el-form-item>
                        <el-form-item label="是否默认场馆">
                            <el-radio-group v-model="form.moren">
                                <el-radio label="是" />
                                <el-radio label="否" />
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">提交</el-button>
                        </el-form-item>
                    </el-form>
                
            </div>
        </div>
    </div>
</template>
  
<script lang="ts">
import { defineComponent, } from 'vue';
import { reactive } from 'vue'
import {useRouter, useRoute} from 'vue-router'
import { useStore } from "vuex";


export default defineComponent({
    name: "addVenues",
    setup() {
        const router = useRouter()
        const store = useStore()
        const form = reactive({
            name: '',
            tel:'',
            email:'',
            state: '正常',
            desc: '',
            moren:'否',
            address:''
        })

        const onSubmit = () => {
            store.commit("addvenues",form)
            router.push({ name: "venues" })
  console.log(form)
}
const back = () =>{
    router.push({ name: "venues" })
}
        return{
            form,
            onSubmit,
            back
        }
    }
})
</script>
  
<style scoped>
.bigbox {
    margin: 50px;
    background-color: white;
}

.box {
    margin: 20px;
    border: 1px;
}

.addHeader {
    height: 70px;
    background-color: rgb(199, 196, 196);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    text-align: center;
}
</style>